<!--六道之众-->
<template>
    <div>
        <Row>
            <i-col :span="liudao_fist_col">
                <div>
                    <Tooltip content="道友，点我有提示！" placement="right-start">
                        <Affix :offset-top="74">
                        <div class="main_left_col_affix_ocon" @click="svgClickHandle">
                            <svg class="left-affix-icon">
                                <use :xlink:href="svg_href"></use>
                            </svg>
                        </div>
                    </Affix>
                    </Tooltip>
                    <Drawer @on-close="closeDrawerHandle" title="查询指南" placement="left" :mask="false" v-model="isDrawerShow" class="drawer-query-guide">
                        <p style="text-indent:2em;">1，若无条件。默认查询零世(当前世),按死亡日期排序【查询所有】。</p>
                        <p style="text-indent:2em;">2，输入一般条件。根据姓名或身份证号检索【定位到某人多世】。</p>
                        <p style="text-indent:2em;">3，输入特殊条件。根据世数、姓名/身份证号检索【某人某世】。</p>
                        <p style="text-indent:2em;">4，若有其它需求，请托梦于我。</p>
                    </Drawer>
                </div>
            </i-col>
            <i-col :span="liudao_seccond_col">
                <Row style="padding-top: 10px">
                    <i-Col span="6">
                        <Input v-model="searchInfo" @on-search="onSearchHandle" @ search enter-button placeholder="姓名、证件号、世数..." />
                    </i-Col>
                </Row>
                <TableComp :columns="columns" :page="page" :pending="pending" @pageChange="pageChange" @onDoubleClick="onDblClick" @pageSizeChange="pageSizeChange"></TableComp>
            </i-col>
        </Row>
        <Row ref="footer" type="flex" justify="center" align="bottom" class="code-row-bg"> 2020 - 2021 &copy; DATonG </Row>
    </div>
</template>

<script lang="tsx">
import { Component } from "vue-property-decorator";
import TableComp from '@/components/TableComponent.vue';
import { LIUDAO, PAGE, SEARCH, INFO, THINK_DEED } from '@/store/modules/crud/keys';
import { INFO as appINFO } from '@/store/modules/app/keys';
import _ from 'lodash';
import TableMixin from '@/mixin/views/table';

@Component({
    components:{ TableComp }
})
export default class Liudao extends TableMixin {
    columns = [
        { title: '世数' , minWidth: 100, key: 'lifeTime', render: this.renderFn},
        { title: '姓名' , minWidth: 120, key: 'name', render: this.renderFn},
        { title: '身份证号', minWidth: 180, key: 'idCardNo', render: this.renderFn },
        { title: '生辰', minWidth: 250,  key: 'birthday', render: this.renderFn },
        { title: '死日', minWidth: 250, key: 'deathTime', render: this.renderFn },
        { title: '寿', minWidth: 100, key: 'age', render: this.renderFn },
        { title: '功', minWidth: 120, key: 'merits', render: this.renderFn },
        { title: '过', minWidth: 128, key: 'fault', render: this.renderFn },
        { title: '和', minWidth: 100, key: 'sum', render: this.renderFn },
    ]
    searchInfo = null;
    isDrawerShow: boolean = false;
    svg_href: string = "#icon-07jiantouxiangyoufill";
    liudao_fist_col: number = 1;
    liudao_seccond_col: number = 24 - this.liudao_fist_col - 1;

    get _name(){
        return LIUDAO
    }
    renderFn(h: any, record: any){
        switch (record.column.key) {
            case 'status':
                return null
            case '_action_':
                return null
            case 'sid':
                return null
            default:
                return <span>{_.get(record.row, record.column.key)}</span>
        }
    }
    onDblClick (row: any, index: number) {
        //把“六道众生”菜单栏，改为行念明细
        this.$store.commit(appINFO,{ key: 'menuLiudaoName', value: '行念明细' });
        this.$store.commit(INFO, {name: THINK_DEED, info: row});
        this.$router.push({name: 'thinkDeed', replace: true });
    }
    onSearchHandle () {
        this.$store.commit(SEARCH, {name: this._name, key: "page", value: 0});
        this.$store.commit(SEARCH, {name: this._name, key: 'searchInfo', value: this.searchInfo});
        this.$store.dispatch(PAGE, {name: this._name});
    }
    created(){
        this.columns.splice(4,1);
    }
    svgClickHandle() {
        this.svg_href = "#icon-jiantou2";
        setTimeout(() => {
            this.liudao_fist_col = 3;
            this.liudao_seccond_col = 24 - this.liudao_fist_col-1;
            this.isDrawerShow = true;
        }, 500);
    }
    closeDrawerHandle(){
        setTimeout(()=>{
            this.liudao_fist_col = 1;
            this.liudao_seccond_col = 24 - this.liudao_fist_col - 1;
        },500);
        setTimeout(()=>{
            this.svg_href = "#icon-07jiantouxiangyoufill";
        },1000);
    }
}
</script>

<style>
.ivu-drawer {
    height: 50%!important;
    width: 12.3%!important;
    top: 74px!important;
}
.main_left_col_affix_ocon {
    height: 32px;
    width: fit-content;
    box-shadow: 2px 2px 10px #e2c5c5;
    border-radius: 3px 4px 5px 6px;
    cursor: pointer;
}
.left-affix-icon {
    height: 32px;
    width: 50px;
    cursor: pointer;
}
.ivu-drawer-body {
    padding: 5px!important;
}
</style>
